<script setup lang="ts">
import {NProgress} from "naive-ui"
import {listen} from '@tauri-apps/api/event';
import {onUnmounted, ref} from "vue";
import {useRoute} from "vue-router";
import {DownloadInfo} from "#/model.ts";
import {formatBytes} from "@/utils";

const route = useRoute()
const idRef = ref(route.query.id as string || '')
const progressRef = ref(0)
const speedRef = ref("")

let unListen = listen<DownloadInfo>('download-change', async (event) => {
  const info = event.payload
  if (idRef.value === info.id) {
    progressRef.value = parseFloat(Number(info.progress)?.toFixed(2) || '0');
    speedRef.value = formatBytes(Number(info.speed));
  }
});

onUnmounted(() => unListen)

</script>

<template>
  <main class="progress-container">
    <n-progress
        class="progress"
        type="line"
        indicator-placement="inside"
        :percentage="progressRef"
    />
    <p class="speed">{{ speedRef }}</p>
  </main>
</template>

<style>
html, body, #app {
  height: 100%;
}
</style>
<style scoped>
.progress-container {
  padding: 16px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

  .progress {
    flex: 1;
  }

  .speed {
    flex-shrink: 0;
  }
}
</style>